<!-- 主要组件 -->
<script setup lang="ts">
import { ref, computed } from 'vue'
import zoom from '@/assets/bit-screen/monitor/zoom.png'
import Player from '@/components/Player.vue'

const props = defineProps({
  cell: { type: Number, required: true },
  showPortList: { type: Array, default: () => [] }
})

const videoList = computed(() => {
  return props.showPortList.reduce((acc, parent) => {
    const checkedChildren = parent.children
      .filter((child) => child.checked)
      .map((child) => ({ ...child, status: parent.status }))

    return acc.concat(checkedChildren).splice(0, props.cell)
  }, [])
})

const getVideoAIOptions = (id: string) => {
  return {
    id: id,
    width: '100%',
    height: '100%',
    source:
      'https://vod.play.t-aaron.com/da1b1c30796d71eebfff7035d0b20102/e4c05858dbc94c20ba0ccf9464bd926d-fe8119f756e23f009b954affb89b754b-hd.mp4',
    isLive: false
  }
}

const videoRefs = ref<(typeof Player)[]>([])
const handleZoom = (index: number) => {
  console.log(`Zoom video at index: ${index}`) // 确认函数被调用
  window.dispatchEvent(new CustomEvent('parentEvent', { detail: index }))
}
</script>

<template>
  <div :class="{ 'grid-container9': cell === 9, 'grid-container4': cell === 4 }">
    <div class="grid-item" v-for="(item, index) in videoList" :key="index">
      <div
        class="relative flex justify-between flex-col h-100% border-solid border-1 border-[#0C6EBA]"
      >
        <div
          class="flex justify-between items-center p-6px"
          style="box-sizing: border-box; background-color: rgba(12, 110, 186, 0.7)"
        >
          <div class="flex justify-center items-center">
            <div class="item-title mr-5px"> {{ item.name }}</div>
            <div
              class="text-xs h-18px bg-[rgba(12,110,186,0.3)] rounded-sm border-1 border-[#396de6]"
            >
             1-- {{ item.astatus==0?'在线':'任务中' }}
            </div>
          </div>
          <img class="w-17px h-17px cursor-pointer" :src="zoom" alt="" @click="handleZoom(index)" />
        </div>
        <div class="video-container flex-1 bg-[#092F51]">
          <Player
            ref="el => videoRefs.value[index] = el"
            :options="getVideoAIOptions(`video_${index}`)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.grid-container4 {
  margin: 0 15px;
  font-family: PingFang SC;
  overflow: hidden;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  height: 95%;
  overflow: hidden;
}
.grid-container9 {
  margin: 0 15px;
  font-family: PingFang SC;
  height: 95%;
  overflow: hidden;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}
.grid-item {
  padding: 20px;
  background: rgba(12, 110, 186, 0.2);
  border: 1px solid #0c6eba;
}
</style>
